<template>
	<view class="idle-details-page" v-if="orderDetail">
		<bar-title bgColor="bg-white"
			:isBack="true"
			:isSolid="false"
		>
			<block slot="content">订单详情</block>
		</bar-title>
		
		
		<view class="order-top">
			<view class="order-status-warp">
				<orderStatusView 
					:verify="!!orderDetail.verifyPayable"
					:status="orderDetail.orderStatus-0"
				/>
			</view>
			
		</view>
		
	
		<!-- 商品 -->
		<view class="goods-section" v-if="orderDetail.productName">
			
			<view class="address-min shadow bg-gray" v-if="identity =='S' && orderDetail.verifyPayable!=0&& orderDetail.orderStatus<4">
				<view class="info-box">
					<text class="name margin-right-sm">{{orderDetail.platformConsignee}}</text>
					<text class="mobile">{{orderDetail.platformTelephone}}</text>
				</view>
				<text class="address">收货地址：{{orderDetail.platformAddress}}</text>
			</view>
			
			<view class="address-min shadow bg-gray" v-else>
				<view class="info-box">
					<text class="name margin-right-sm">{{orderDetail.postalName}}</text>
					<text class="mobile">{{orderDetail.phone}}</text>
				</view>
				<text class="address">收货地址：{{orderDetail.provinceName}}{{orderDetail.cityName}}{{orderDetail.areaName}}{{orderDetail.address}}</text>
			</view>
			
			<!-- 二手商户 -->
			<view class="shop-warp">
				<view class="avatar-warp">
					<image class="avatar" :src="orderDetail.headurl" mode="aspectFill"></image> 
				</view>
				<view class="nickname">{{orderDetail.nickname}}</view>
				<view class="cuIcon-right text-gray"></view>
			</view>
			
			<!-- 二手剧本 -->
			<view class="scen-group solid-bottom">
				<view class="scen2  text-gray">
					<view class="scen-img">
						<image :src="orderDetail.productIcon" mode="aspectFill"></image>
					</view>
					<view class="scen-info">
						<view class="scen-info-title">
							<text class="title">{{orderDetail.productName}}</text>
							<text  class='cu-tag bg-cyan round sm'>{{orderDetail.scennum}}人本</text>
						</view>
						<view class="publisher">发行商:{{orderDetail.scriptPublisher}}</view>
						<view class="text-price">{{orderDetail.productDiscountPrice}}</view>
					</view>
					<view class="num"><text class="text-xs">x</text>1</view>
				</view>
			</view>
			
			<view class="cu-list menu" >
				<!-- 运费 -->
				<view class="cu-item">
					<view class="content">
						<text class="text-black">运费</text>
					</view>
					<view class="action" v-if="!!orderDetail.isPackageMail">
						<text class="text-red">包邮</text>
					</view>
					<view class="action" v-else>
						<text class="text-price" 
							:class="{'text-through': orderDetail.isPackageMail}"
						>{{orderDetail.productTransportCosts}}</text>
					</view>
				</view>
				<!-- 第三方验证 -->
				<view class="cu-item">
					<view class="content"  @click="proofScheme=true">
						<text class="text-black">第三方验证费</text>
						<text class="cuIcon-questionfill text-grey margin-left-sm"></text>
					</view>
					<view class="action">
						<text class="text-price">{{orderDetail.verifyPayable}}</text>
					</view>
				</view>
				<!-- 实付款 -->
				<view class="cu-item">
					<view class="content" >
						<text class="text-black">实付款</text>
					</view>
					<view class="action">
						<text class="text-price text-red">{{orderDetail.orderAmount}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-list menu margin-top-sm" >
			<view class="cu-item">
				<view class="content">
					订单编号：<text class="text-black">{{orderDetail.orderId}}</text>
				</view>
				<view class="action" >
					<button class="cu-btn line-gray sm"
						@tap="onCopy" :data-copy="orderDetail.orderId"
					>复制</button>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					创建时间：<text class="text-black">{{orderDetail.gmtCreate}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="orderDetail.payTime">
				<view class="content">
					付款时间：<text class="text-black">{{orderDetail.payTime}}</text>
				</view>
			</view>
			<view class="cu-item" v-if="orderDetail.deliveryTime">
				<view class="content">
					发货时间：<text class="text-black">{{orderDetail.deliveryTime}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					官方客服：<text class="text-black">155****4519</text>
				</view>
				<view class="action" >
					<button class="cu-btn line-gray sm"
						@tap="calltelephone('15529294519')"
					>联系客服</button>
				</view>
			</view>
			<view class="cu-item" v-if="orderDetail.courierNumber">
				<view class="content">
					快递单号：<text class="text-black">{{orderDetail.courierNumber}}</text>
				</view>
				<view class="action" >
					<button class="cu-btn line-gray sm"
						@tap="onCopy" :data-copy="orderDetail.courierNumber"
					>复制</button>
				</view>
			</view>
			<view class="cu-item" v-if="orderDetail.courierCompany">
				<view class="content">
					快递公司：<text class="text-black">{{orderDetail.courierCompany}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="cu-modal" :class="modalName=='DialogDelivery'?'show':''">
			<view class="cu-dialog bg-white ">
				<view class="cu-bar bg-white justify-end">
					<view class="content text-bold text-black">确认发货</view>
				</view>
				<view class="padding-lr-xl padding-bottom">
					<view class="cu-btn block line-gray lg round margin-top">
					   <input class="uni-input"
							placeholder="请输入快递公司名称" 
							name="couriercompany"
							@blur="inputChange"
							confirm-type="next"
							data-key="couriercompany" 
					   />
					</view>
					<view class="cu-btn block line-gray lg round margin-top">
					   <input class="uni-input"
							placeholder="请输入快递单号" 
							name="courierNumber"
							@blur="inputChange"
							confirm-type="next"
							data-key="courierNumber"
					   />
					</view>
				</view>
				<view class="cu-bar bg-white justify-end solid-top">
					<view class="action">
						<button class="cu-btn line-cyan text-cyan" @tap="hideModal">取消</button>
						<button class="cu-btn bg-cyan margin-left" @tap="onDelivery">提交</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar solid-top foot bg-white justify-end">
			<view class="btn-group">
				
				<view v-if="identity =='S'">
					<button class="line-cyan cu-btn round margin-xs"
						@click.stop="confirmContact"
					>联系买家</button>
					
					<button class="bg-cyan cu-btn round margin-xs"
						v-if="orderDetail.orderStatus == 2"
						@click.stop="deliveryDialog"
					>确认发货</button>
				</view>
				
				<view  v-if="identity =='B'">
					<button class="line-cyan cu-btn round margin-xs"
						@click.stop="confirmContact"
					>联系卖家</button>
					
					<button class="line-cyan cu-btn round margin-xs"
						v-if="orderDetail.refundStatus != 0"
						@click.stop="confirmRefund"
					>退货详情</button>
					
					<button class="bg-cyan cu-btn round margin-xs"
						v-if="(orderDetail.verifyPayable==0 && orderDetail.orderStatus == 3) ||
						(orderDetail.verifyPayable!=0 && orderDetail.orderStatus == 5)"
						@click.stop="confirmReceipt"
					>确认收货</button>
					
				</view>
				
				
			</view>
			
		</view>
		
		
		<view class="scheme" v-if="proofScheme">
			<cu-protocol :content="orderDetail.disclaimer"
				confirmText="确定"
				@btnState="btnProof"
			></cu-protocol>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex";
import ViewScen from '@/components/box/ViewScen.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import orderStatusView from '@/components/basics/order-status.vue';
import cuProtocol from '@/components/protocol.vue';

import { Leisurely } from '@/models/leisurely.js';
export default {
	components: {
		orderStatusView,
		uniLoadMore,
		cuProtocol
	},
	data() {
		return {
			modalName: '',
			orderId: '',
			identity: '',
			orderDetail: null,
			proofScheme: false,
			courier: {}
		}
	},
	onLoad(option) {
		if (option && option.orderId) {
			this.orderId = option.orderId
			this.identity = option.identity
			this.getIdleOrderDetails()
		}
	},
	methods: {
		async getIdleOrderDetails() {
			let orderDetail = await Leisurely.idleOrderDetails(this.orderId, this.identity)
			this.orderDetail = orderDetail
			
		},
		onCopy(e) {
			let copy = e.currentTarget.dataset.copy
			uni.setClipboardData({
				data: copy,
				success: function () {
					console.log('success');
				}
			})
		},
		calltelephone(tel) {
			uni.makePhoneCall({
			    phoneNumber: tel //仅为示例
			});
		},
		btnProof(flag) {
			this.proofScheme = false
		},
		confirmContact() {
			this.$mTool.showModal({
				title: '提示',
				content: '如需联系，请前往APP查看！',
				showCancel: false
			})
		},
		
		hideModal(e) {
			this.modalName = null
		},
		inputChange(event) {
			const key = event.currentTarget.dataset.key;
			this.courier[key] = event.detail.value;
			console.log(this.courier);
		},
		confirmReceipt() {
			// 确认收货
			Leisurely.idleReceipt(this.orderId).then(()=>{
				this.$mTool.showToast({
					title: '已经收货',
					mask: true
				})
				this.getIdleOrderDetails()
			})
		},
		confirmRefund() {
			this.$jumpPages('orderRefundDetail', {
				orderId: this.orderId,
				identity: this.identity
			})
		},
		deliveryDialog(){
			this.modalName = 'DialogDelivery'
			this.courier.orderId = this.orderId
		},
		onDelivery() {
			// 确认发货
			let checkRes = this.$graceChecker.check(this.courier,
				this.$formRuleConfig['courier'])
			if (!checkRes) {
				this.$mTool.showToast({
					title: this.$graceChecker.error,
					icon: 'none',
					mask: true
				})
				return
			}
			Leisurely.idleDelivery(
				this.courier.orderId, 
				this.courier.couriercompany,
				this.courier.courierNumber
			).then(()=>{
				this.hideModal()
				this.$mTool.showToast({
					title: '发货成功',
					mask: true
				})
				this.getIdleOrderDetails()
			})
			
		},
	},
	
}
</script>

<style lang="scss" scoped>
.order-top{
	background-color: #2EB9C3;
	height: 268rpx;
	.order-status-warp{
		min-height: 168rpx;
		padding: 30rpx 10rpx;
	}
}
.address-min {
	background-color: #F8FAFF;
	padding: 38rpx 30rpx;
	border-radius: 10rpx;
	margin: 0 30rpx;
	position: relative;
	z-index: 1;
	top: -100rpx;
	margin-bottom: -90rpx;
	.info-box{
		color: #000000;
		font-size: 28rpx;
		margin-bottom: 14rpx;
	}
	.address{
		color: #333333;
		font-size: 24rpx;
		line-height: 1.6;
	}
}
.goods-section {
	background: #fff;
	.shop-warp{
		display: flex;
		align-items: center;
		padding: 30rpx;
		.avatar-warp{
			width: 60rpx;
			height: 60rpx;
			margin-right: 22rpx;
			border-radius: 50%;
			background: #F5F5F5;
		}
		.avatar{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.nickname{
			font-size: 30rpx;
			color: #000000;
			margin-right: 22rpx;
		}
	}
	.scen-group{
		padding: 20rpx 30rpx;
	}
	.scen2{
		display: flex;
		position: relative;
		padding-bottom: 20rpx;
		
		.scen-img{
			width: 120rpx;
			height: 165rpx;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
			background: #F5F5F5;
			border-radius: 10rpx;
			image{
				border-radius: 10rpx;
				width: 120rpx;
				height: 165rpx;
			}
		}
		.scen-info{
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 15px;
			font-size: 14px;
		}
		.scen-info-title{
			line-height: 20px;
			margin-bottom: 24rpx;
			.title{
				font-size: 36rpx;
				color: #000;
				font-weight: 700;
				margin-right: 27rpx;
			}
		}
		.publisher{
			margin-bottom: 30rpx;
			font-size: 24rpx;
		}
		.text-price{
			color: #E42C2C;
			font-size: 32rpx;
			font-weight: 700;
		}
	}
	
}
.cu-list.menu>.cu-item .content {
    font-size: 24rpx;
}
</style>
